<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta
        http-equiv="Content-Type"
        content="text/html; charset=utf-8"
    />
    <title>import test</title>

    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }

        .canvasPart {
            width: 80%;
            height: 100%;
            float: left;
        }

        .textPart {
            width: 20%;
            height: 100%;
            float: left;
            background-color: grey;
        }

        .textPart h2{
            text-align: center;
        }
    </style>

    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <!-- 允许您将模型导入到场景中 -->
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <!-- 允许您使用触摸屏 -->
    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
</head>

<body>
    <div class="canvasPart">
        <!-- 注意browseatouch-action="none"以获得PEPr/canvas调整大小事件的最佳效果 -->
        <canvas
            id="renderCanvas"
            touch-action="none"
        ></canvas>
    </div>

    <div class="textPart">
        <h2>Introduce</h2>
        <p>This is a large village,many people live here and work togrther!Hope you will injoin us,friend!</p>
    </div>

    <!-- <babylon
        id="myViewer"
        extends="minimal"
    ></babylon> -->

    <script>
        const canvas = document.getElementById("renderCanvas"); //获取canvas元素
        const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

        //在这里添加与playground格式匹配的代码
        const createScene = function () {
            const scene = new BABYLON.Scene(engine);//使用引擎
            const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON.Vector3(0, 0, 0));//设置摄像机
            camera.attachControl(canvas, true);
            const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));//设置灯光

            BABYLON.SceneLoader.ImportMeshAsync("", "F:/VScode/babylonjs/babylon-demo1/moudles/", "scene.glb");
            return scene;
        }
        const scene = createScene(); //调用createScene函数

        //注册一个渲染循环来重复渲染场景
        engine.runRenderLoop(function () {
            scene.render();
        });

        // 注意浏览器、画布大小调整事件
        window.addEventListener("resize", function () {
            engine.resize();
        });

        // BabylonViewer.viewerManager.getViewerPromiseById('myViewer').then((viewer) => {
        //     viewer.onSceneInitObservable.add(() => {
        //         viewer.sceneManager.camera.radius = 15; //set camera radius
        //         viewer.sceneManager.camera.beta = Math.PI / 2.2; //angle of depression
        //     });
        //     viewer.onEngineInitObservable.add((scene) => {
        //         viewer.loadModel({
        //             url: "path to model file"
        //         });
        //     });
        // });
    </script>
</body>

</html>